// utils
.show {
    display: block;
}

.show-flex {
    display: flex;
}

.show-grid {
    display: grid;
}

.show-inline {
    display: inline;
}

.hide {
    display: none;
}

// global
:root {
    --startup-height: 600px;
    --z-index-modal: 1000;
    --z-index-overlay: 900;

    &.theme {
        &-light {
            --text-color: #000000;
            --bg-color: #ffffff;
            --hover-color: #efefef;
            --active-color: #e5e5e5;
            --line-color: #dbdbdb;
            --msg-color: #daf0ff;
            --shadow-color: rgba(0, 0, 0, 0.4);
            --folder-icon: url("/icons/folder.webp");
            --search-icon: url("/icons/search.webp");
            --manage-icon: url("/icons/manage.webp");
            --eye-icon: url("/icons/eye.webp");
            --eye-slash-icon: url("/icons/eye-slash.webp");
            --options-icon: url("/icons/options.webp");
            --icon-filter: contrast(1);
        }

        &-dark {
            --text-color: #eeeeee;
            --bg-color: #3a3a3a;
            --hover-color: #545454;
            --active-color: #6d6d6d;
            --line-color: #878787;
            --msg-color: #006375;
            --shadow-color: rgba(255, 255, 255, 0.4);
            --folder-icon: url("/icons/folder-dark.webp");
            --search-icon: url("/icons/search-dark.webp");
            --manage-icon: url("/icons/manage-dark.webp");
            --eye-icon: url("/icons/eye-dark.webp");
            --eye-slash-icon: url("/icons/eye-slash-dark.webp");
            --options-icon: url("/icons/options-dark.webp");
            --icon-filter: contrast(0.8);
        }
    }
}

html {
    overflow: hidden;
    user-select: none;
}

body {
    font-size: 12px;
    color: var(--text-color);
    background-color: var(--bg-color);
    margin: 0px 0px;
    padding: 0px;
    min-width: 300px;
    max-width: 800px;
    max-height: 600px;
    height: auto;
    overflow: hidden;
}

body.startup {
    height: var(--startup-height)!important;
}

body > :nth-child(3), body > :nth-child(3):hover,  body > :nth-child(3):focus, body > :nth-child(3):active {
    box-sizing: content-box;
    border-top-width: 1px!important;
    border-top-color: var(--line-color);
    border-top-style: solid;
}